<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<html>
<head>
    <meta charset="UTF-8">
    <title>会员管理</title>
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/hotel.css"/>
    <!--<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>-->
    <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="layer/layer.js"></script>
</head>
<body class="vip-body">
<input type="hidden" id="VuserName" th:value="${session.UserName}"/>
<input type="hidden" id="UserStatusid" th:value="${session.UserStatusid}"/>
<input type="hidden" id="UserType" th:value="${session.UserType}"/>
<script type="text/javascript">
    var uname = $('#VuserName').val();
    if(uname == ''){
        window.location.href = "toLogin.do";
    }
    var ustatusid = $('#UserStatusid').val();
    if(ustatusid == 1){
        window.location.href = "toDecode.do";
    }
    var UserType = $('#UserType').val();
    if(UserType === '经理'){
        window.location.href = "toStatement.do";
    }
</script>
<div class="vip-button">
    <div class="vip-button-detail">
        <form action="" method="post">
            <div class="vip-button-text">
                <ul>
                    <li><label for="userName">姓名:</label></li>
                    <li><label for="Identity">身份证号:</label></li>
                    <li><label for="Money">充值:</label></li>
                    <li><label for="Phone">手机号码:</label></li>
                </ul>
            </div>
            <div class="vip-button-input">
                <ul>
                    <li><input type="text" id="userName"/></li>
                    <li><input type="text" id="Identity"/></li>
                    <li><input type="number" id="Money"/></li>
                    <li><input type="text" id="Phone"/></li>
                </ul>
            </div>
            <button type="button" id="button-vip">确定</button>
        </form>
    </div>
</div>
<div class="vip-detail">
    <table>
        <thead>
            <tr>
                <td width="60px">编号</td>
                <td width="120px">姓名</td>
                <td width="120px">身份证号</td>
                <td width="120px">手机号码</td>
                <td width="120px">用户金额</td>
                <td width="120px">Vip类型</td>
                <td width="120px">会员折扣</td>
            </tr>
        </thead>
        <tbody id="vipTbody">

        </tbody>
    </table>
    <div class="vip-center">
        <ul class="pagination" id="page">

        </ul>
        共<span id="totalPage"></span>页
    </div>
</div>
</body>
<script type="text/javascript">
    $('#userName').blur(checkUserName);
    $('#Identity').blur(checkIdentity);
    $('#Phone').blur(checkPhone);
    $('#Money').blur(checkMoney);
    var userName;
    var Identity;
    var Phone;
    var Money;
    function checkUserName() {
        userName = $('#userName').val();
        var reg_userName = /^([\u4e00-\u9fa5]{2,})$/;
        var flag = reg_userName.test(userName);
        if (flag) {
            $("#userName").css("border", "");
        } else {
            layer.tips('必须为中文并且至少两位', '#userName');
            $("#userName").css("border", "1px solid red");
        }
        return flag;
    }
    function checkIdentity() {
        Identity = $('#Identity').val();
        var reg_Identity = /^\d{14}(\d{1}|\d{4}|(\d{3}[xX]))$/;
        var flag = reg_Identity.test(Identity);
        if (flag) {
            $("#Identity").css("border", "");
        } else {
            layer.tips('身份证不符合规范', '#Identity');
            $("#Identity").css("border", "1px solid red");
        }
        return flag;
    }
    function checkPhone() {
        Phone = $('#Phone').val();
        var reg_Phone = /^(?:\+?86)?1(?:3\d{3}|5[^4\D]\d{2}|8\d{3}|7(?:[01356789]\d{2}|4(?:0\d|1[0-2]|9\d))|9[189]\d{2}|6[567]\d{2}|4(?:[14]0\d{3}|[68]\d{4}|[579]\d{2}))\d{6}$/;
        var flag = reg_Phone.test(Phone);
        if (flag) {
            $("#Phone").css("border", "");
        } else {
            layer.tips('手机号不符合规范', '#Phone');
            $("#Phone").css("border", "1px solid red");
        }
        return flag;
    }
    function checkMoney(){
        Money = $('#Money').val();
        var flag = (Money != '');
        if (flag) {
            $("#Money").css("border", "");
        } else {
            layer.tips('充值不能为空', '#Money');
            $("#Money").css("border", "1px solid red");
        }
        return flag;
    }
    $('#button-vip').click(function (){
        if(checkUserName()&&checkIdentity()&&checkPhone()&&checkMoney()){
            $.post(
                "vip.do",
                {"userName":userName,"Identity":Identity,"Phone":Phone,"Money":Money},
                function (data) {
                    if (data.status == 0) {
                        window.location.reload();
                    } else if (data.status == 1) {
                        layer.msg(data.message);
                    }
                }
            );
        }else {
            layer.msg("将空白填写完整");
        }
    });
    findByPage(1);
    function findByPage(page){
        $('#vipTbody').empty();
        var currentPage = page;
        $.post(
            "vipAndClientList.do",
            {'currentPage': currentPage},
            function (data){
                if (data.status == 0) {
                    var pageBean = data.result;
                    var totalPage = pageBean.totalPage;
                    var vipList = pageBean.lists;
                    var no = pageBean.pageSize * (currentPage - 1);
                    for(var i = 0;i<vipList.length;i++){
                        $('#vipTbody').append('<tr>' +
                                '<td width="60px">'+(no+i+1)+'</td>'+
                                '<td width="120px">'+vipList[i].vipName+'</td>'+
                                '<td width="120px">'+vipList[i].client.clientIdentity+'</td>'+
                                '<td width="120px">'+vipList[i].client.clientPhone+'</td>'+
                                '<td width="120px">'+vipList[i].client.clientMoney+'</td>'+
                                '<td width="120px">'+vipList[i].vipType+'</td>'+
                                '<td width="120px">'+vipList[i].vipDiscount+'</td>'+
                            '</tr>');
                    }
                    $('#page').empty();
                    var begin = 1;
                    var end = 1;
                    if (totalPage <= 5) {
                        begin = 1;
                        end = totalPage;
                    } else {
                        begin = currentPage - 2;
                        end = currentPage + 2;
                        if (begin <= 1) {
                            begin = 1;
                            end = 5;
                        }
                        if (end >= totalPage) {
                            begin = totalPage - 4;
                            end = totalPage;
                        }
                    }
                    //添加上一页的按钮
                    $('#page').append('<li id="left" class="" style="display: inline-block;border: 1px solid blue;width: 20px;height: 20px"><span onclick="findByPage(' + (currentPage - 1) + ')" >&laquo;</span></li>');
                    //添加中间的页数
                    for (var i = begin; i <= end; i++) {
                        $('#page').append('<li class="" style="display: inline-block;border: 1px solid blue;width: 20px;height: 20px"><a onclick="findByPage(' + i + ')">' + i + '</a></li>');
                    }
                    //添加下一页的按钮
                    $('#page').append('<li id="right" class="" style="display: inline-block;border: 1px solid blue;width: 20px;height: 20px"><span onclick="findByPage(' + (currentPage + 1) + ')" >&raquo;</span></li>');
                    if (currentPage == 1) {
                        //添加禁用样式
                        $('#left').addClass('disabled');
                        //清除点击事件
                        $('#left>span').removeAttr('onclick');
                    }
                    if (currentPage == totalPage) {
                        //添加禁用样式
                        $('#right').addClass('disabled');
                        //清除点击事件
                        $('#right>span').removeAttr('onclick');
                    }
                    //添加当前页的激活样式
                    $('#page>li').eq(currentPage - begin + 1).addClass('selectPage');
                    //显示总页数
                    $('#totalPage').html(totalPage);
                } else if (data.status == 1) {
                    layer.msg(data.message);
                }
            }
        );
    }
</script>
</html>
